@import "../variables";
@import "../function";
@import "../mixins/breakpoints";
html {
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

@include media-breakpoint-down(sm, $grid-breakpoints) {
    .container {
        width: 100%;
    }
    .ad_word{
        font-size: pxTorem(14px);
    }    
    .hotel_left{
        font-size: pxTorem(16px);
        margin-left: 67%;
    }
    .margin_left{
        margin-left: 9%;   
    }
}

@include media-breakpoint-up(md, $grid-breakpoints) {
    .container {
        width: 640px;
    }
    .ad_word{
        font-size: pxTorem(24px);
    }    
    .hotel_left{
        font-size: pxTorem(30px);
        margin-left: 66%;
        width: 30%;
    }
    .margin_left{
        margin-left: 4%;    
    }
}
@media (max-width: 380px) {
    .hotel_left{
        margin-left: 68%;
    }
    .margin_left{
        margin-left: 6%;   
    }
}
@media (max-width: 320px) {
    .ad_word{
        font-size: pxTorem(12px);
    }       
    .hotel_left{
        margin-left: 66%;
    }
    .margin_left{
        margin-left: 4%;   
    }
}
.section {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.doc-intro-section {
    height: pxTorem(1138px);
    .doc-intro-fg {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .doc-intro-detail {
        font-size: pxTorem(32px);
        color: #ffffff;
        line-height: 1.5;
        text-align: center;
    }
}

#doc-intro-1 {
    .logo {
        width: pxTorem(100px);
        margin-left: pxTorem(56px);
        margin-top: pxTorem(56px);
    }
    .app-download {
        width: pxTorem(170px);
        height: pxTorem(52px);
        margin-right: pxTorem(32px);
        margin-top: pxTorem(56px);
        background-color: #ffffff;
        color: #ffd100;
        font-size: pxTorem(30px);
        line-height: pxTorem(52px);
        text-align: center;
        cursor: pointer;
        border-radius: pxTorem(26px);
    }
    .doc-intro-fg {
        margin-top: pxTorem(216px);
        width: pxToWidthPercent(518);
    }
    .doc-intro-detail {
        margin-top: pxTorem(146px);
    }
}

#doc-intro-2 {
    .doc-intro-fg-container {
        margin-top: pxTorem(220px);
        margin-left: pxTorem(74px);
        width: pxToWidthPercent(259);
    }
    .doc-intro-fg {
        width: 100%;
    }
    .doc-intro-spec-detail-container {
        margin-top: pxTorem(220px);
        margin-right: pxTorem(74px);
        width: pxToWidthPercent(120);
    }
    .doc-intro-spec-detail {
        margin-bottom: pxTorem(18px);
        width: 100%;
        &:last-child {
            margin-bottom: 0;
        }
        .doc-intro-spec {
            width: 100%;
            margin-bottom: pxTorem(12px);
        }
        .doc-intro-spec-info {
            font-size: pxTorem(24px);
            color: #666666;
            text-align: center;
            font-weight: 100;
        }
    }
    .doc-intro-detail {
        margin-top: pxTorem(80px);
    }
}

#doc-intro-3 {
    .doc-intro-fg {
        margin-top: pxTorem(310px);
        width: pxToWidthPercent(500);
    }
    .doc-intro-detail {
        margin-top: pxTorem(100px);
    }
}

#doc-footer {
    text-align: center;
    height: pxTorem(290px);
    .app-download {
        width: pxToWidthPercent(430);
        margin: pxTorem(44px) auto 0;
        border-radius: pxTorem(10px);
        color: #ffffff;
        font-size: pxTorem(32px);
        height: pxTorem(76px);
        line-height: pxTorem(76px);
        background-color: #016f79;
    }
    .visit-web {
        color: #333333;
        font-size: pxTorem(26px);
        margin-top: pxTorem(38px);
        .iconfont {
            display: inline-block;
            margin-right: pxTorem(12px);
            font-size: pxTorem(34px);
        }
    }
    .copyright {
        color: #333333;
        font-size: pxTorem(18px);
        margin-top: pxTorem(30px);
        margin-bottom: pxTorem(30px);
    }
}

#doc-relative {
    position: relative;
}

.app-fixed-download-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: none;
    pointer-events: none;
    .container {
        background: none;
        position: relative;
        height: 100%;
        pointer-events: none;
    }
}

#doc-fixed-download {
    position: absolute;
    bottom: pxTorem(50px);
    right: pxTorem(32px);
    font-size: pxTorem(76px);
    color: #016f79;
    top: auto;
    left: auto;
    border-radius: 50%;
    pointer-events: all;
    width: 64px;
    height: 64px;
    background: url(image/min-btn.png);
    background-size:64px 64px ;
}

.app-download {
    cursor: pointer;
}
//package
#doc-relative{
    img{
        width: 100%;
    }
    .hotel_num{
        position: absolute;
        top: 7%;
        right: 4%;
        height: 2%;
        width: 28%;
        background: url(image/top_number_block.png) center no-repeat;
        background-size: contain;
        text-align: center;
        line-height: 2%;
    }
    .ad_word{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -49%;
        width: 98%;
        font-weight: 500;
    }
    .margin_left{    
        float: left;
    }
    .hotel_left{
        color: #84ce2e;
        display: block;
        float: left;  
        width: 30%;
        text-align: center;    
    }
    .hotel_mobile{
        position: absolute;
        top: 15.4%;
        left: 16%;
        height: 0.9%;
        width: 18%;
    }
}